//在画布上根据数据绘制线路图
function drawLine(lineData,canvase){
	//根据后台返回的线路数据情况绘制线路上的数据
	if(lineData!=null&&lineData!=undefined&&canvase[0]!=undefined){
		var context = canvase[0].getContext('2d');//获取画布
		var canvaseWidth=canvase[0].parentNode.scrollWidth;
		canvase[0].width = canvaseWidth;
		var name = lineData.name;
		var version = lineData.version;
		context.fillText(name+version,20,20); //写数据版本名称
		context.beginPath();
        context.moveTo(10,110);
        context.lineTo(canvaseWidth-10,110);
        context.stroke();
        context.closePath();//绘制线路直线
        //
        var station = lineData.station;//车站信息
        var stationPosition =null;
        if(station!=null){
        	stationPosition = station.position;//车站位置
        }else{
        	stationPosition = 0;
        }
        var train = lineData.train;//火车信息
        var trainPosition = train.position;//火车位置
        var lineLength = stationPosition - trainPosition+10;//车站到车距离+10公里（前后各加5）
        var gap = (canvaseWidth-100)/lineLength;//每公里间隙
        var startPosition = trainPosition-5;
        var teleseme = lineData.telesemeList;//前方信号机信息数组
        
        //绘制公里标：每公里画短竖线，每5公里整数倍画短竖线长线并标识公里标数值
        for(var i=0;i<lineLength;i++){
        	if(i%5==0){
        		context.beginPath();
                context.moveTo(50+gap*i,100);
                context.lineTo(50+gap*i,110);
                context.stroke();
                context.closePath();//绘制短长直线
                context.fillText(startPosition+i,50+gap*i-10,125);//绘制公里标值
        	}else{
        		context.beginPath();
                context.moveTo(50+gap*i,105);
                context.lineTo(50+gap*i,110);
                context.stroke();
                context.closePath();//绘制短直线	
        	}
        	//绘制火车信息
        	if(trainPosition==(i+startPosition)){//判断当前位置是火车位置
        		 context.beginPath();/*矩形车厢*/
                 context.strokeRect(gap*i,80,80,30);
                 context.stroke();
                 context.closePath();
                 context.save();
                 context.font = "8px Courier New";//设置字体样式
                 context.fillStyle="blue";
                 context.beginPath();
                 context.fillText(train.type+"-"+train.number,gap*i+3,100);
                 context.stroke();
                 context.closePath();
                 context.restore();
                 context.beginPath();/*车头*/
                 context.strokeRect(gap*i+83,90,20,20);
                 context.stroke();
                 context.closePath();
        	}
        	//绘制车站信息
        	if(station!=null&&station!=undefined){
        		if(stationPosition==(i+startPosition)){
            		context.beginPath();
                    context.moveTo(50+gap*i,70);
                    context.lineTo(50+gap*i,110);
                    context.stroke();
                    context.closePath();//绘制短长直线
                    context.fillText(station.name,50+gap*i+10,90);//写站名
                    context.save();
                  //画小圆
                    context.beginPath();
                    context.arc(50+gap*i,55,8,0,Math.PI*2,true);
                    context.stroke();
                    context.closePath();
                    //画大圆粗线条
                    context.lineWidth = 3;
                    context.beginPath();
                    context.arc(50+gap*i,55,15,0,Math.PI*2,true);
                    context.stroke();
                    context.closePath();
                    context.restore();
                  
            	}
        	}
        	//绘制信号机信息
        	if(teleseme!=null&&teleseme!=undefined){
        		for (var j = 0; j < teleseme.length; j++) {
        			var telesemePosition = teleseme[j].position;
        			if(telesemePosition==(i+startPosition)){
        				context.beginPath();
                        context.moveTo(50+gap*i,70);
                        context.lineTo(50+gap*i,110);
                        context.stroke();
                        context.closePath();//绘制短长直线
                        context.fillText(teleseme[j].number,50+gap*i+10,90);//写站名
                        context.save();
                        //画圆圈信号机
                        if(teleseme[j].code=="1"){
                        	context.fillStyle="#FF0000";//红
                        }else if(teleseme[j].code=="2"){
                        	context.fillStyle="#FFFF00";//黄
                        }else if(teleseme[j].code=="3"){
                        	context.fillStyle="#00CC00";//绿
                        }else{
                        	context.fillStyle="#00CC00";//绿
                        }
                        context.beginPath();
                        context.arc(50+gap*i,55,15,0,Math.PI*2,true);
                        context.stroke();
                        context.closePath();
                        context.fill();
                        context.restore();
        			}
				}
        	}
        }
	}else{
		
	}
	
}
